<template>
  <el-card>
    <div slot="header" class="header">
      <span>线上热搜</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item >双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div>
        <el-row :gutter="10">
          <el-col :span="12">
              <div class="left">
                 <LineCharts/>
              </div>
          </el-col>
          <el-col :span="12">
            <div class="left">
                 <LineCharts/>
              </div>
          </el-col>
        </el-row>
        <el-table style="width: 100%" border @sort-change="handler" >
          <el-table-column
            label="排名"
            width="width">
          </el-table-column>
          <el-table-column
            label="关键字"
            width="width">
          </el-table-column>
          <el-table-column
             sortable
            label="用户数"
            width="width">
          </el-table-column>
          <el-table-column
             sortable
            label="周涨幅"
            width="width">
          </el-table-column>
        </el-table>
         <el-pagination
           style="text-align:right"
           layout="prev, pager, next"
          :total="50">
         </el-pagination>
    </div>
  </el-card>
</template>

<script>
import LineCharts from '../../Card/lineCharts'
export default {
  name: "",
  components:{
    LineCharts
  },
  methods:{
    handler(params){
      // alert('进行数据的排序')
      console.log(params);
    }
  }
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.left{
  width:100%;
  height:150px;
}
</style>
